<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 视频增强器</title>
    <link href="/static/css/style.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl mx-auto">
        <div class="text-center mb-6">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">🚀 AI 视频增强器</h1>
            <p class="text-gray-600 mb-3">支持多平台视频下载 | 本地文件上传 | AI双语字幕 | 知识卡片 | 播客模式</p>
            <a href="/" class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                🏠 刷新页面
            </a>
        </div>

        {% if message %}
            <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative mb-4" role="alert">
                <span class="block sm:inline">{{ message }}</span>
                <div class="mt-3">
                    <a href="/" class="inline-flex items-center px-3 py-1 border border-blue-600 text-xs font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        ← 返回首页继续测试
                    </a>
                </div>
            </div>
        {% endif %}

        <form action="/process_video" method="post" enctype="multipart/form-data" class="space-y-6">
            <!-- 上传策略 -->
            <div class="form-group bg-yellow-50 p-4 rounded-md">
                <h3 class="text-lg font-medium text-gray-900 mb-2">⚡ 上传策略</h3>
                <p class="text-sm text-yellow-900 mb-3">选择是否直接上传原视频，或启用 AI 增强流程（字幕、知识卡片、拼接等）。</p>
                <div class="flex items-start">
                    <input id="use_original_video_unmodified" name="use_original_video_unmodified" type="checkbox" value="True"
                           class="mt-1 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                           onchange="toggleProcessingOptions()">
                    <div class="ml-2">
                        <label for="use_original_video_unmodified" class="block text-sm font-semibold text-gray-900">直接使用原视频</label>
                        <p class="text-xs text-gray-600">跳过字幕识别、翻译、片头拼接、知识卡片生成等步骤，仅根据页面设置直接上传原文件。</p>
                    </div>
                </div>
                <div id="use_original_hint" class="mt-3 p-3 text-xs text-yellow-800 bg-yellow-100 border border-yellow-200 rounded-md" style="display: none;">
                    ✅ 已启用“直接使用原视频”模式：请通过“在线视频”或“本地上传”提供原始文件，处理选项与拼接功能将被临时停用。
                </div>
            </div>

            <!-- 视频源选择 -->
            <div class="form-group bg-green-50 p-4 rounded-md">
                <h3 class="text-lg font-medium text-gray-900 mb-3">📹 视频源选择</h3>
                <p class="text-sm text-gray-600 mb-2">支持在线视频链接、本地上传、文字转视频以及批量合并结果。</p>
                <div class="space-y-3">
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center">
                            <input id="source_url" name="video_source" type="radio" value="url"
                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
                                   onchange="toggleVideoSource()">
                            <label for="source_url" class="ml-2 block text-sm text-gray-900">在线视频链接</label>
                        </div>
                        
                        <div class="flex items-center">
                            <input id="source_upload" name="video_source" type="radio" value="upload"
                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
                                   onchange="toggleVideoSource()">
                            <label for="source_upload" class="ml-2 block text-sm text-gray-900">本地文件上传</label>
                        </div>
                        
                        <div class="flex items-center">
                            <input id="source_text" name="video_source" type="radio" value="text" checked
                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
                                   onchange="toggleVideoSource()">
                            <label for="source_text" class="ml-2 block text-sm text-gray-900">文字输入 (TTS语音合成)</label>
                        </div>
                        
                        <div class="flex items-center">
                            <input id="source_batch" name="video_source" type="radio" value="batch"
                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
                                   onchange="toggleVideoSource()">
                            <label for="source_batch" class="ml-2 block text-sm text-gray-900">📂 批量视频组合</label>
                        </div>
                    </div>

                    <!-- 在线视频区域 -->
                    <div id="url_input_area" class="space-y-3" style="display: none;">
                        <div>
                            <label for="video_url" class="block text-sm font-medium text-gray-700">视频链接:</label>
                            <input type="url" id="video_url" name="video_url" value="{{ video_url if video_url else '' }}"
                                   placeholder="支持 YouTube、Bilibili、抖音、TikTok 等多平台"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        </div>
                        
                        <div class="bg-blue-50 p-3 rounded">
                            <p class="text-sm text-blue-800 font-medium mb-2">支持的平台:</p>
                            <div class="grid grid-cols-2 gap-2 text-xs text-blue-700">
                                <div>• YouTube</div>
                                <div>• Bilibili (B站)</div>
                                <div>• TikTok / 抖音</div>
                                <div>• Twitter / X</div>
                                <div>• Vimeo</div>
                                <div>• Facebook</div>
                                <div>• Instagram</div>
                                <div>• 其他1000+平台</div>
                            </div>
                        </div>
                    </div>

                    <!-- 本地上传区域 -->
                    <div id="upload_input_area" style="display: none;" class="space-y-3">
                        <div>
                            <label for="video_file" class="block text-sm font-medium text-gray-700">选择视频文件:</label>
                            <input type="file" id="video_file" name="video_file" accept="video/*"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <p class="mt-1 text-xs text-gray-500">支持 MP4, AVI, MOV, MKV 等常见视频格式</p>
                        </div>
                    </div>

                    <!-- 文字输入区域 -->
                    <div id="text_input_area" style="display: block;" class="space-y-3">
                        <div>
                            <label for="text_input" class="block text-sm font-medium text-gray-700">输入文字内容:</label>
                            <textarea id="text_input" name="text_input" rows="8" 
                                      placeholder="输入要转换为语音的文字内容，支持中英文混合..."
                                      class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm resize-vertical"></textarea>
                            <div id="text_input_help" class="mt-1 text-xs text-gray-500">
                                支持中英文混合，建议每段不超过1000字符以获得最佳效果
                            </div>
                            
                            <!-- XTTS v2 参考音频上传 -->
                            <div id="xtts_reference_audio" class="mt-2 p-3 bg-yellow-50 rounded-md border border-yellow-200" style="display: none;">
                                <h4 class="text-sm font-medium text-yellow-900 mb-2">🎤 XTTS v2 参考音频上传</h4>
                                <div class="text-xs text-yellow-800 space-y-2">
                                    <p>请为每个说话人上传参考音频文件（建议10-30秒）：</p>
                                    <div class="grid grid-cols-2 gap-2">
                                        <div>
                                            <label class="block text-xs font-medium">说话人A音频:</label>
                                            <input type="file" name="reference_audio_A" accept="audio/*" class="text-xs">
                                        </div>
                                        <div>
                                            <label class="block text-xs font-medium">说话人B音频:</label>
                                            <input type="file" name="reference_audio_B" accept="audio/*" class="text-xs">
                                        </div>
                                    </div>
                                    <p class="text-red-600">⚠️ 如不上传参考音频，建议改用Bark模型</p>
                                </div>
                            </div>
                            
                            <!-- 多人对话格式说明 -->
                            <div id="multi_speaker_help" class="mt-2 p-3 bg-blue-50 rounded-md" style="display: none;">
                                <h4 class="text-sm font-medium text-blue-900 mb-2">📢 多人对话格式说明:</h4>
                                <div class="text-xs text-blue-800 space-y-1">
                                    <p><strong>使用格式:</strong> [说话人名称]: 对话内容</p>
                                    <p><strong>支持说话人:</strong> A, B, C, D (最多4人，自动分配不同声音)</p>
                                    <div class="space-y-2">
                                        <p><strong>💡 模型选择建议:</strong></p>
                                        <div class="text-xs space-y-1">
                                            <p><span class="font-bold text-green-600">🎭 Bark</span> - 推荐！内置多种声音，即选即用</p>
                                            <p><span class="font-bold text-blue-600">🎤 XTTS v2</span> - 需要上传参考音频进行声音克隆</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-2 p-2 bg-white rounded text-xs">
                                    <strong>示例：</strong><br>
                                    <span class="text-green-600">[主持人]: 大家好，欢迎收听今天的科技播客！</span><br>
                                    <span class="text-purple-600">[嘉宾]: 谢谢邀请，很高兴能和大家分享。</span><br>
                                    <span class="text-green-600">[主持人]: 今天我们要聊聊人工智能的最新发展。</span><br>
                                    <span class="text-purple-600">[嘉宾]: 这确实是一个非常热门的话题。</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="space-y-3">
                            <div>
                                <label for="tts_model" class="block text-sm font-medium text-gray-700">TTS模型:</label>
                                <select id="tts_model" name="tts_model" onchange="onTtsModelChange()" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <option value="chinese" selected>🇨🇳 Baker - 中文专用模型 (推荐)</option>
                                    <option value="bark">🎭 Bark - 最自然的多语言TTS</option>
                                    <option value="your_tts">🌟 YourTTS - 高质量多语言模型</option>
                                    <option value="xtts_v2">🚀 XTTS v2 - 最先进的克隆语音</option>
                                    <option value="english_vits">🇺🇸 VITS - 高质量英文模型</option>
                                    <option value="english">🔧 Tacotron2 - 稳定英文模型</option>
                                </select>
                                <p class="mt-1 text-xs text-gray-500">不同模型质量和速度各异，建议先尝试Bark模型</p>
                            </div>
                            
                            <div class="space-y-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700">对话模式:</label>
                                    <div class="flex items-center space-x-4 mt-2">
                                        <div class="flex items-center">
                                            <input id="single_speaker" name="dialogue_mode" type="radio" value="single" checked
                                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
                                                   onchange="toggleDialogueMode()">
                                            <label for="single_speaker" class="ml-2 block text-sm text-gray-900">单人模式</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input id="multi_speaker" name="dialogue_mode" type="radio" value="multi"
                                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
                                                   onchange="toggleDialogueMode()">
                                            <label for="multi_speaker" class="ml-2 block text-sm text-gray-900">多人对话 (播客风格)</label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label for="tts_language" class="block text-sm font-medium text-gray-700">语言:</label>
                                        <select id="tts_language" name="tts_language" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                            <option value="zh">中文</option>
                                            <option value="en">英文</option>
                                            <option value="ja">日文</option>
                                            <option value="ko">韩文</option>
                                            <option value="es">西班牙文</option>
                                            <option value="fr">法文</option>
                                            <option value="de">德文</option>
                                        </select>
                                    </div>
                                    
                                    <div id="single_speaker_options">
                                        <label for="tts_speaker" class="block text-sm font-medium text-gray-700">说话人:</label>
                                        <select id="tts_speaker" name="tts_speaker" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                            <option value="female">女声</option>
                                            <option value="male">男声</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-yellow-50 p-4 rounded-md">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-yellow-800">
                                        <strong>重要提醒：</strong>
                                        <br>• 文字输入模式会自动使用静态背景（需要上传背景图片）
                                        <br>• TTS语音合成需要一定时间，请耐心等待
                                        <br>• 建议文字长度适中（500-2000字符）以获得最佳效果
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 自定义字幕上传 -->
                    <div id="custom_subtitle_area" class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                        <h4 class="text-md font-medium text-yellow-900 mb-2">📝 (可选) 上传自定义字幕</h4>
                        <div>
                            <label for="subtitle_file" class="block text-sm font-medium text-gray-700">选择SRT字幕文件:</label>
                            <input type="file" id="subtitle_file" name="subtitle_file" accept=".srt"
                                   class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-yellow-100 file:text-yellow-700 hover:file:bg-yellow-200">
                            <p class="mt-2 text-xs text-yellow-800">
                                💡 如果上传，将跳过自动语音识别，直接使用此字幕文件进行翻译和烧录。
                            </p>
                        </div>
                    </div>

                    <div>
                        <label for="target_language" class="block text-sm font-medium text-gray-700">目标翻译语言:</label>
                        <select id="target_language" name="target_language"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="zh" selected>中文</option>
                            <option value="en">English</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 三段式拼接选择 -->
            <div class="form-group bg-cyan-50 p-4 rounded-md" data-processing-section="enhanced">
                <h3 class="text-lg font-medium text-gray-900 mb-3">🎬 三段式视频拼接</h3>
                <div class="space-y-4">
                    <!-- 片头视频选择 -->
                    <div>
                        <label for="selected_intro" class="block text-sm font-medium text-gray-700 mb-2">选择片头视频:</label>
                        <select id="selected_intro" name="selected_intro" 
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">不使用片头视频</option>
                            {% if available_intros %}
                                {% for intro in available_intros %}
                                    <option value="{{ intro.filename }}">{{ intro.filename }} ({{ intro.duration_str }}, {{ intro.resolution }}, {{ intro.size_mb }})</option>
                                {% endfor %}
                            {% endif %}
                        </select>
                        <p class="mt-1 text-xs text-gray-500">
                            📁 片头视频目录: videos/intros/ 
                            {% if available_intros %}
                                | 已找到 {{ available_intros|length }} 个片头视频
                            {% else %}
                                | 暂无片头视频
                            {% endif %}
                        </p>
                    </div>

                    <!-- 开场口播选择 -->
                    <div>
                        <label for="selected_opening" class="block text-sm font-medium text-gray-700 mb-2">选择开场口播:</label>
                        <select id="selected_opening" name="selected_opening" 
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">不使用开场口播</option>
                            {% if available_openings %}
                                {% for opening in available_openings %}
                                    <option value="{{ opening.filename }}">{{ opening.filename }} ({{ opening.duration_str }}, {{ opening.resolution }}, {{ opening.size_mb }})</option>
                                {% endfor %}
                            {% endif %}
                        </select>
                        <p class="mt-1 text-xs text-gray-500">
                            📁 开场口播目录: videos/openings/ 
                            {% if available_openings %}
                                | 已找到 {{ available_openings|length }} 个开场视频
                            {% else %}
                                | 暂无开场视频
                            {% endif %}
                        </p>
                    </div>

                    <!-- 使用说明 -->
                    <div class="bg-blue-50 p-3 rounded">
                        <h4 class="text-sm font-medium text-blue-900 mb-2">📖 三段式拼接说明:</h4>
                        <div class="text-xs text-blue-800 space-y-1">
                            <p><strong>拼接顺序:</strong> 片头视频 → 开场口播 → 正片内容</p>
                            <p><strong>文件要求:</strong> 支持 MP4, AVI, MOV, MKV 等格式</p>
                            <p><strong>分辨率处理:</strong> 自动调整片头和开场视频分辨率以匹配主视频</p>
                            <p><strong>字幕调整:</strong> 系统会自动调整字幕时间戳以适应拼接后的视频</p>
                            <p><strong>可选使用:</strong> 可以只选择片头、只选择开场，或都不选择</p>
                        </div>
                    </div>

                    <!-- 文件管理提示 -->
                    <div class="bg-yellow-50 p-3 rounded">
                        <h4 class="text-sm font-medium text-yellow-900 mb-2">📂 文件管理提示:</h4>
                        <div class="text-xs text-yellow-800 space-y-1">
                            <p><strong>添加视频文件:</strong> 将文件复制到对应目录后刷新页面</p>
                            <p><strong>片头视频:</strong> 放置在项目根目录下的 videos/intros/ 文件夹</p>
                            <p><strong>开场口播:</strong> 放置在项目根目录下的 videos/openings/ 文件夹</p>
                            <p><strong>建议命名:</strong> 使用有意义的文件名，如 "finance_intro_1.mp4"</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 视频模式选择 -->
            <div class="form-group bg-purple-50 p-4 rounded-md" data-processing-section="enhanced">
                <h3 class="text-lg font-medium text-gray-900 mb-3">🎨 视频模式</h3>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <input id="use_original_video" name="video_mode" type="radio" value="original"
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
                               onchange="toggleVideoMode()">
                        <label for="use_original_video" class="ml-2 block text-sm text-gray-900">使用原视频画面</label>
                    </div>

                    <div class="flex items-center">
                        <input id="use_static_background" name="video_mode" type="radio" value="static" checked
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
                               onchange="toggleVideoMode()">
                        <label for="use_static_background" class="ml-2 block text-sm text-gray-900">使用静态图片背景 (播客模式)</label>
                    </div>

                    <div id="background_image_upload" style="display: block;" class="bg-white p-3 rounded border">
                        <label for="background_image" class="block text-sm font-medium text-gray-700 mb-2">选择背景图片:</label>
                        <input type="file" id="background_image" name="background_image" accept="image/*"
                               class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <p class="mt-1 text-xs text-gray-500">支持 JPG, PNG 格式，建议尺寸 1920x1080 或 16:9 比例</p>
                    </div>
                </div>
            </div>

            <!-- 处理选项 -->
            <div class="form-group bg-gray-50 p-4 rounded-md" data-processing-section="enhanced">
                <h3 class="text-lg font-medium text-gray-900 mb-3">⚙️ 处理选项</h3>
                <div class="space-y-2">
                    <div class="flex items-start">
                        <input id="skip_subtitle_processing" name="skip_subtitle_processing" type="checkbox" value="True"
                               class="mt-1 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <div class="ml-2">
                            <label for="skip_subtitle_processing" class="block text-sm text-gray-900">跳过字幕处理</label>
                            <p class="text-xs text-gray-500">视频已自带字幕时可选择；不会重新识别或烧录字幕。</p>
                        </div>
                    </div>

                    <div class="flex items-center">
                        <input id="skip_knowledge_card_extraction" name="skip_knowledge_card_extraction" type="checkbox" value="True" checked
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <label for="skip_knowledge_card_extraction" class="ml-2 block text-sm text-gray-900">跳过知识卡片提取</label>
                    </div>

                    <div class="flex items-center">
                        <input id="skip_chapter_generation" name="skip_chapter_generation" type="checkbox" value="True" checked
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <label for="skip_chapter_generation" class="ml-2 block text-sm text-gray-900">跳过章节信息生成</label>
                    </div>

                    <div class="flex items-center">
                        <input id="skip_summary_and_keywords_extraction" name="skip_summary_and_keywords_extraction" type="checkbox" value="True" checked
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <label for="skip_summary_and_keywords_extraction" class="ml-2 block text-sm text-gray-900">跳过摘要和关键词提取</label>
                    </div>

                    <div class="flex items-center">
                        <input id="skip_youtube_upload" name="skip_youtube_upload" type="checkbox" value="True" checked
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <label for="skip_youtube_upload" class="ml-2 block text-sm text-gray-900">跳过 YouTube 上传</label>
                    </div>
                </div>
            </div>

            <!-- YouTube 自定义设置 -->
            <div class="form-group bg-blue-50 p-4 rounded-md">
                <h3 class="text-lg font-medium text-gray-900 mb-3">📺 YouTube 自定义设置</h3>
                
                <div class="flex items-center mb-4">
                    <input id="custom_youtube_settings" name="custom_youtube_settings" type="checkbox" value="True"
                           class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                           onchange="toggleYouTubeSettings()">
                    <label for="custom_youtube_settings" class="ml-2 block text-sm font-weight-medium text-gray-900">启用高级上传设置</label>
                </div>

                <div id="youtube_custom_fields" style="display: none;" class="space-y-4 bg-white p-4 rounded border">
                    <div>
                        <label for="custom_title" class="block text-sm font-medium text-gray-700">自定义视频标题:</label>
                        <input type="text" id="custom_title" name="custom_title" 
                               placeholder="留空使用默认标题（基于视频文件名）"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label for="custom_thumbnail" class="block text-sm font-medium text-gray-700">自定义封皮图片:</label>
                        <input type="file" id="custom_thumbnail" name="custom_thumbnail" accept="image/*"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <p class="mt-1 text-xs text-gray-500">支持 JPG, PNG 格式，建议尺寸 1280x720</p>
                    </div>

                    <div>
                        <label for="auto_publish" class="block text-sm font-medium text-gray-700">发布设置:</label>
                        <select id="auto_publish" name="auto_publish"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="private">私密 (不公开，仅自己可见)</option>
                            <option value="unlisted">不公开 (有链接的人可看)</option>
                            <option value="public">公开 (所有人可搜索)</option>
                        </select>
                        <p class="mt-1 text-xs text-gray-500">建议先设为私密，确认无误后再手动改为公开</p>
                    </div>

                    <div>
                        <label for="selected_channel" class="block text-sm font-medium text-gray-700">选择上传频道:</label>
                        <select id="selected_channel" name="selected_channel"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            {% if available_channels %}
                                {% for channel in available_channels %}
                                    <option value="{{ channel.key }}">{{ channel.name }}</option>
                                {% endfor %}
                            {% else %}
                                <option value="">未找到可用频道</option>
                            {% endif %}
                        </select>
                        <p class="mt-1 text-xs text-gray-500">将视频上传到选定的YouTube频道 (tokens文件夹: {{ available_channels|length }} 个频道)</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="flex items-center">
                            <input id="auto_upload_immediately" name="auto_upload_immediately" type="checkbox" value="True" checked
                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                            <label for="auto_upload_immediately" class="ml-2 block text-sm text-gray-900">立即自动上传</label>
                        </div>

                        <div class="flex items-center">
                            <input id="made_for_kids" name="made_for_kids" type="checkbox" value="True"
                                   class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                            <label for="made_for_kids" class="ml-2 block text-sm text-gray-900">面向儿童内容</label>
                        </div>
                    </div>
                    <p class="mt-2 text-xs text-gray-500">面向儿童：如内容主要面向13岁以下儿童，请勾选</p>
                </div>
            </div>

            <button type="submit"
                    class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                开始处理视频
            </button>
        </form>
        </div>
    </div>

    <script>
        function toggleYouTubeSettings() {
            const checkbox = document.getElementById('custom_youtube_settings');
            const fields = document.getElementById('youtube_custom_fields');
            
            if (checkbox.checked) {
                fields.style.display = 'block';
                fields.classList.add('show');
                // 平滑滚动到YouTube设置区域
                setTimeout(() => {
                    fields.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }, 300);
            } else {
                fields.classList.remove('show');
                setTimeout(() => {
                    fields.style.display = 'none';
                }, 300);
                // 清空字段
                document.getElementById('custom_title').value = '';
                document.getElementById('custom_thumbnail').value = '';
                document.getElementById('auto_publish').value = 'private';
                document.getElementById('auto_upload_immediately').checked = true;
                document.getElementById('made_for_kids').checked = false;
            }
        }

        function toggleVideoMode() {
            const staticMode = document.getElementById('use_static_background');
            const uploadDiv = document.getElementById('background_image_upload');

            if (staticMode.checked) {
                uploadDiv.style.display = 'block';
            } else {
                uploadDiv.style.display = 'none';
                // 清空图片选择
                document.getElementById('background_image').value = '';
            }
        }

        function toggleProcessingOptions() {
            const checkbox = document.getElementById('use_original_video_unmodified');
            if (!checkbox) return;

            const textRadio = document.getElementById('source_text');
            const uploadRadio = document.getElementById('source_upload');
            const batchRadio = document.getElementById('source_batch');
            const processingSections = document.querySelectorAll('[data-processing-section="enhanced"]');
            const hint = document.getElementById('use_original_hint');

            if (checkbox.checked) {
                if (textRadio && textRadio.checked && uploadRadio) {
                    uploadRadio.checked = true;
                }
                if (batchRadio && batchRadio.checked && uploadRadio) {
                    uploadRadio.checked = true;
                }

                if (textRadio) textRadio.disabled = true;
                if (batchRadio) batchRadio.disabled = true;

                processingSections.forEach(section => {
                    section.classList.add('opacity-60', 'pointer-events-none');
                    section.querySelectorAll('input, select, textarea').forEach(el => {
                        if (!el.dataset.originalDisabled) {
                            el.dataset.originalDisabled = el.disabled ? 'true' : 'false';
                        }
                        el.disabled = true;
                    });
                });

                if (hint) hint.style.display = 'block';
                toggleVideoSource();
            } else {
                if (textRadio) textRadio.disabled = false;
                if (batchRadio) batchRadio.disabled = false;

                processingSections.forEach(section => {
                    section.classList.remove('opacity-60', 'pointer-events-none');
                    section.querySelectorAll('input, select, textarea').forEach(el => {
                        const wasDisabled = el.dataset.originalDisabled === 'true';
                        el.disabled = wasDisabled;
                        delete el.dataset.originalDisabled;
                    });
                });

                if (hint) hint.style.display = 'none';
                toggleVideoSource();
            }
        }

        function toggleDialogueMode() {
            const multiSpeaker = document.getElementById('multi_speaker');
            const helpSection = document.getElementById('multi_speaker_help');
            const singleSpeakerOptions = document.getElementById('single_speaker_options');
            const xttsReferenceAudio = document.getElementById('xtts_reference_audio');
            const ttsModelSelect = document.getElementById('tts_model');
            
            if (multiSpeaker.checked) {
                helpSection.style.display = 'block';
                singleSpeakerOptions.style.display = 'none';
                
                // 过滤TTS模型：只显示支持多人对话的模型
                filterTtsModels('multi');
                
                // 检查当前选择的模型
                const ttsModel = ttsModelSelect.value;
                if (ttsModel === 'xtts_v2') {
                    xttsReferenceAudio.style.display = 'block';
                } else {
                    xttsReferenceAudio.style.display = 'none';
                }
            } else {
                helpSection.style.display = 'none';
                singleSpeakerOptions.style.display = 'block';
                xttsReferenceAudio.style.display = 'none';
                
                // 恢复TTS模型：显示所有模型
                filterTtsModels('single');
            }
        }
        
        function filterTtsModels(mode) {
            const ttsModelSelect = document.getElementById('tts_model');
            const currentValue = ttsModelSelect.value;
            
            // 定义所有可用的模型
            const allModels = [
                { value: 'chinese', text: '🇨🇳 Baker - 中文专用模型 (推荐)', supportMulti: false },
                { value: 'bark', text: '🎭 Bark - 最自然的多语言TTS (多人对话推荐)', supportMulti: true },
                { value: 'your_tts', text: '🌟 YourTTS - 高质量多语言模型', supportMulti: false },
                { value: 'xtts_v2', text: '🚀 XTTS v2 - 最先进的克隆语音 (需参考音频)', supportMulti: true },
                { value: 'english_vits', text: '🇺🇸 VITS - 高质量英文模型', supportMulti: false },
                { value: 'english', text: '🔧 Tacotron2 - 稳定英文模型', supportMulti: false }
            ];
            
            // 清空当前选项
            ttsModelSelect.innerHTML = '';
            
            // 根据模式过滤模型
            let filteredModels;
            let defaultModel;
            
            if (mode === 'multi') {
                // 多人对话模式：只显示支持多人对话的模型
                filteredModels = allModels.filter(model => model.supportMulti);
                defaultModel = 'bark'; // 多人对话默认推荐Bark
            } else {
                // 单人模式：显示所有模型
                filteredModels = allModels;
                defaultModel = 'chinese'; // 单人模式默认推荐Baker
            }
            
            // 添加过滤后的选项
            filteredModels.forEach(model => {
                const option = document.createElement('option');
                option.value = model.value;
                option.text = model.text;
                ttsModelSelect.appendChild(option);
            });
            
            // 设置选中的值
            const availableValues = filteredModels.map(m => m.value);
            if (availableValues.includes(currentValue)) {
                // 如果当前值在过滤后的列表中，保持当前选择
                ttsModelSelect.value = currentValue;
            } else {
                // 如果当前值不在过滤后的列表中，使用默认值
                ttsModelSelect.value = defaultModel;
            }
            
            // 触发模型变化事件
            onTtsModelChange();
        }
        
        function onTtsModelChange() {
            const multiSpeaker = document.getElementById('multi_speaker');
            const xttsReferenceAudio = document.getElementById('xtts_reference_audio');
            const ttsModel = document.getElementById('tts_model').value;
            
            // 只有在多人对话模式且选择XTTS v2时才显示参考音频上传
            if (multiSpeaker.checked && ttsModel === 'xtts_v2') {
                xttsReferenceAudio.style.display = 'block';
            } else {
                xttsReferenceAudio.style.display = 'none';
            }
        }

        function toggleVideoSource() {
            const urlMode = document.getElementById('source_url');
            const uploadMode = document.getElementById('source_upload');
            const textMode = document.getElementById('source_text');
            const batchMode = document.getElementById('source_batch');
            const urlArea = document.getElementById('url_input_area');
            const uploadArea = document.getElementById('upload_input_area');
            const textArea = document.getElementById('text_input_area');
            const batchArea = document.getElementById('batch_input_area');
            
            if (urlMode.checked) {
                urlArea.style.display = 'block';
                uploadArea.style.display = 'none';
                textArea.style.display = 'none';
                if (batchArea) batchArea.style.display = 'none';
                // 重置表单验证
                document.getElementById('video_url').required = true;
                document.getElementById('video_file').required = false;
                document.getElementById('text_input').required = false;
                // 清空其他字段
                document.getElementById('video_file').value = '';
                document.getElementById('text_input').value = '';
            } else if (uploadMode.checked) {
                urlArea.style.display = 'none';
                uploadArea.style.display = 'block';
                textArea.style.display = 'none';
                if (batchArea) batchArea.style.display = 'none';
                // 重置表单验证
                document.getElementById('video_url').required = false;
                document.getElementById('video_file').required = true;
                document.getElementById('text_input').required = false;
                // 清空其他字段
                document.getElementById('video_url').value = '';
                document.getElementById('text_input').value = '';
            } else if (textMode.checked) {
                urlArea.style.display = 'none';
                uploadArea.style.display = 'none';
                textArea.style.display = 'block';
                if (batchArea) batchArea.style.display = 'none';
                // 重置表单验证
                document.getElementById('video_url').required = false;
                document.getElementById('video_file').required = false;
                document.getElementById('text_input').required = true;
                // 清空其他字段
                document.getElementById('video_url').value = '';
                document.getElementById('video_file').value = '';
                
                // 文字输入模式自动设置为静态背景模式
                const staticBackgroundRadio = document.getElementById('use_static_background');
                if (staticBackgroundRadio) {
                    staticBackgroundRadio.checked = true;
                    toggleVideoMode();
                }
            } else if (batchMode && batchMode.checked) {
                // 批量视频处理 - 跳转到专门的批量处理页面
                window.location.href = '/batch-video';
                return;
            }
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化为单人模式的模型列表
            filterTtsModels('single');

            // 检查是否来自批量视频合并页面
            checkBatchVideoParams();

            // 根据当前状态初始化处理选项
            toggleProcessingOptions();
        });
        
        function checkBatchVideoParams() {
            const urlParams = new URLSearchParams(window.location.search);
            const mergedVideoParam = urlParams.get('merged_video');
            const fromBatch = urlParams.get('from_batch');
            
            if (fromBatch === 'true' && mergedVideoParam) {
                try {
                    const videoInfo = JSON.parse(mergedVideoParam);
                    
                    // 切换到文件上传模式
                    const uploadMode = document.getElementById('source_upload');
                    if (uploadMode) {
                        uploadMode.checked = true;
                        toggleVideoSource();
                    }
                    
                    // 创建一个虚拟的文件对象来表示合并后的视频
                    const videoFileInput = document.getElementById('video_file');
                    if (videoFileInput) {
                        // 显示文件信息
                        const fileName = videoInfo.filename || '合并后的视频.mp4';
                        const fileSize = videoInfo.size || 0;
                        
                        // 创建文件信息显示
                        const fileInfoDiv = document.createElement('div');
                        fileInfoDiv.className = 'mt-2 p-3 bg-green-50 border border-green-200 rounded-md';
                        fileInfoDiv.innerHTML = `
                            <div class="flex items-center">
                                <svg class="h-5 w-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <div>
                                    <p class="text-sm font-medium text-green-800">✅ 已选择合并后的视频文件</p>
                                    <p class="text-xs text-green-600">文件名: ${fileName}</p>
                                    <p class="text-xs text-green-600">大小: ${formatFileSize(fileSize)}</p>
                                    <p class="text-xs text-green-600">路径: ${videoInfo.path}</p>
                                </div>
                            </div>
                        `;
                        
                        // 将文件信息添加到文件输入框后面
                        videoFileInput.parentNode.appendChild(fileInfoDiv);
                        
                        // 将视频路径存储在隐藏字段中
                        let hiddenInput = document.getElementById('merged_video_path');
                        if (!hiddenInput) {
                            hiddenInput = document.createElement('input');
                            hiddenInput.type = 'hidden';
                            hiddenInput.id = 'merged_video_path';
                            hiddenInput.name = 'merged_video_path';
                            videoFileInput.parentNode.appendChild(hiddenInput);
                        }
                        hiddenInput.value = videoInfo.path;
                    }
                    
                    // 清理URL参数
                    window.history.replaceState({}, document.title, '/');
                    
                    // 显示成功消息
                    setTimeout(() => {
                        alert('🎉 批量视频合并完成！\\n\\n已自动选择合并后的视频文件，您可以继续进行AI字幕生成和视频增强。');
                    }, 500);
                    
                } catch (error) {
                    console.error('解析合并视频参数失败:', error);
                }
            }
        }
        
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
    </script>
</body>
</html>
